import React, {Component} from 'react';
import {nanoid} from  'nanoid'
// connect连接组件和redux
import {connect} from 'react-redux'
import {createPersonAction} from  '../../redux/actions/person'

class Person extends Component {

    addPerson=()=>{
        const name=this.nameNode.value
        const age=this.ageNode.value*1
        const {createPerson}=this.props
        createPerson({id:nanoid(),name,age})
    }

    render() {
        const{persons,count}=this.props
        return (
            <div>
                <h1>我是Person组件,Count组件的和为{count}</h1>
                <div>
                    <input ref={c=>this.nameNode=c} type="text" placeholder='请输入姓名'/>
                    <input ref={c=>this.ageNode=c} type="text" placeholder='请输入年龄'/>
                    <button onClick={this.addPerson}>添加</button>
                </div>
                <div>
                    <ul>
                        {persons.map((item)=>{
                            return(
                                <li key={item.id}>{item.name}---{item.age}</li>
                            )
                        })}
                    </ul>
                </div>
            </div>
        );
    }
}

export default connect(
    state=>{
        return{
          persons:state.persons,
            count:state.count
        }
    },
    {
        createPerson:createPersonAction
    }
)(Person)
